<template>
	<div class="white-box">
		<div class="table-mb">
			<el-button type="primary" @click="handleAdd({mod_id:0,title:'顶级菜单'})">添加菜单</el-button>
		</div>

		<!-- <div class="task-one">
			<div class="task-one__item">
				<span class="task-one__label">菜单名称：</span>
				<el-input placeholder="请输入菜单名称搜索" v-model="search_text" @keyup.enter.native="handleSearch" clearable>
				</el-input>
			</div>
			<div class="task-one__btn clearfix">
				<el-button type="primary" :loading="search_btn" :icon="Search" @click="handleSearch">搜索</el-button>
			</div>
		</div> -->

		<el-table lass="table-mb" v-loading="loading" :data="itemArr" type="expand"
			:header-cell-style="{ background: '#F5F7FA' }" element-loading-background="rgba(255, 255, 255, 0.6)"
			row-key="mod_id" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
			<el-table-column prop="title" label="标题" min-width="260"> </el-table-column>
			<!-- <el-table-column prop="sub_title" label="副标题" min-width="120"> </el-table-column> -->
			<el-table-column prop="url" label="路径" min-width="120"> </el-table-column>
			<el-table-column prop="sort" label="排序" min-width="120"> </el-table-column>
			
			<el-table-column prop="created_at" label="发布时间" width="160"> </el-table-column>
			<el-table-column label="操作" width="170" fixed="right">
				<template #default="{ row }">
					<el-button class="theme-btn" link type="primary" v-if="row.level!=3"
						@click="handleAdd(row)">添加</el-button>
					<el-button class="theme-btn" link type="primary" @click="handleEdit(row)">编辑</el-button>
					<el-popconfirm :persistent="false" title="确定删除吗？" confirm-button-text="确定" cancel-button-text="取消"
						@confirm="handleDelete(row)">
						<template #reference>
							<el-button class="theme-btn" link type="primary" style="margin-left: 14px">删除</el-button>
						</template>
					</el-popconfirm>
				</template>
			</el-table-column>
		</el-table>

		<!-- 添加/编辑 -->
		<el-dialog v-model="dialogClass" title="设置菜单" width="560px" :append-to-body="true" :destroy-on-close="true"
			:close-on-click-modal="false" @close="closeAddClass">
			<el-form ref="ruleClassRef" :model="ruleClassForm" :rules="ruleCheckClass" label-width="120px">
				<el-form-item label="上级菜单" prop="parent_id" required>
					<el-select v-model="ruleClassForm.parent_id" placeholder="请选择上级菜单" :disabled="true">
						<el-option :label="item.title" :value="item.mod_id" v-for="(item, index) in parent_options"
							:key="index" />
					</el-select>
				</el-form-item>
				<el-form-item label="菜单名称" prop="title" required>
					<el-input v-model.trim="ruleClassForm.title" clearable placeholder="请输入菜单名称" />
				</el-form-item>
				<!-- <el-form-item label="副标题" prop="sub_title">
					<el-input v-model.trim="ruleClassForm.sub_title" clearable placeholder="请输入副标题" />
				</el-form-item> -->
				
				<el-form-item label="是否隐藏" prop="is_show">
					<el-switch v-model="ruleClassForm.is_show" inline-prompt size="large" :active-value="2"
						:inactive-value="1" active-text="是" inactive-text="否" />
				</el-form-item>
				
				<el-form-item label="路径" prop="url" required>
					<el-input v-model.trim="ruleClassForm.url" clearable placeholder="请输入路径" />
				</el-form-item>
				<el-form-item label="图标" prop="icon">
					<el-input v-model.trim="ruleClassForm.icon" clearable placeholder="请输入图标" />
				</el-form-item>				
				
				<el-form-item label="排序" prop="sort" required>
					<el-input v-model.number="ruleClassForm.sort" clearable oninput="value=value.replace(/[^\d]/g,'')"
						placeholder="请输入排序数字" />
				</el-form-item>
				<el-form-item>
					<div class="flexs" style="margin-top: 30px">
						<el-button type="primary" :loading="form_loading" @click="submitClassForm(ruleClassRef)">
							确认
						</el-button>
						<el-button @click="resetClassForm(ruleClassRef)">重置</el-button>
					</div>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script setup>
	import {
		getCurrentInstance,
		ref,
		reactive,
		onMounted,
		onBeforeUnmount
	} from "vue"
	import {
		useRouter
	} from "vue-router"
	import {
		Lock,
		Iphone,
		Warning
	} from "@element-plus/icons-vue"
	import SlideVerify from "vue3-slide-verify"
	import "vue3-slide-verify/dist/style.css"
	import JSEncrypt from "jsencrypt"

	const router = useRouter()
	const {
		proxy
	} = getCurrentInstance()

	onMounted(() => {
		getList()
	})
	onBeforeUnmount(() => {

	})

	/**
	 * 添加/编辑
	 * @property {Boolean} dialogClass 添加/编辑弹窗状态
	 * * @property {Boolean} parent_options 上级菜单
	 * @property {Boolean} form_loading 提交按钮状态
	 * @property {Number} classType 弹窗类型，1是添加，2是编辑
	 * @property {Array} ruleClassRef 表单规则
	 * @property {Object} ruleClassForm  表单字段
	 * @property {Object} ruleCheckClass  表单提示
	 * @property {Function} submitClassForm 提交表单
	 * @property {Function} addClass 添加分类
	 * @property {Function} closeAddClass 关闭弹窗
	 */
	const dialogClass = ref(false)
	const parent_options = ref([])
	const form_loading = ref(false)
	const classType = ref(1)
	const ruleClassRef = ref(null)
	const ruleClassForm = reactive({
		parent_id: 0,
		title: "",
		sort: "100",
		icon: "",
		url: "",
		controller_name:"",
		action_name:'',
		is_show: 1, // [1:显示,2:隐藏]
	})
	const ruleCheckClass = reactive({
		parent_id: [{
			required: true,
			message: "请选择上级菜单",
			trigger: "change"
		}],
		title: [{
			required: true,
			message: "请输入菜单名称",
			trigger: "blur"
		}],
		url: [{
			required: true,
			message: "请输入路径",
			trigger: "blur"
		}],
		sort: [{
			required: true,
			message: "请输入排序数字",
			trigger: "blur"
		}],
	})
	const data = reactive({
		ruleForm: {
			account: "",
			pass: "",
			code: ''
		},
	})
	const handleSearch = () => {
		// search_btn.value = true
		// pubRefreshParams(getList)
	}
	const handleAdd = (row) => {
		dialogClass.value = true
		var arr = []
		arr.push(row)
		classType.value = 1
		setTimeout(() => {
			parent_options.value = arr
			console.log("parent_options",parent_options.value)
			ruleClassForm.parent_id = row.mod_id
		}, 50)
	}
	const handleEdit = (row) => {
		console.log("row", row)
		dialogClass.value = true
		classType.value = 2
		setTimeout(() => {
			// parent_options.value=arr
			ruleClassForm.parent_id = row.parent_id
			ruleClassForm.mod_id = row.mod_id
			// ruleClassForm.sub_title = row.sub_title
			ruleClassForm.title = row.title
			ruleClassForm.sort = row.sort
			ruleClassForm.icon = row.icon
			ruleClassForm.url = row.url
		}, 50)
	}

	function handleDelete(params) {
		proxy.$axios
			.post("admin/system/menu/delete", {
				mod_id: params.mod_id
			})
			.then((res) => {
				if (res.data.code == 200) {
					proxy.$message({
						message: "删除成功",
						type: "success"
					})
					getList()
				} else {
					proxy.$message({
						message: res.data.msg,
						type: "error"
					})
				}
			})
			.catch((err) => {})
	}
	const submitClassForm = (formEl) => {
		if (!formEl) return
		formEl.validate((valid, fields) => {
			if (valid) {
				form_loading.value = true
				// let names = proxy.$util.replaceStr(ruleClassForm.name)
				let data = ruleClassForm
				if (classType.value == 2) {
					data.id = ruleClassForm.id
				}

				let url = classType.value == 1 ? "admin/system/menu/create" : "admin/system/menu/update"
				proxy.$axios
					.post(url, data)
					.then((res) => {
						form_loading.value = false
						if (res.data.code == 200) {
							dialogClass.value = false
							proxy.$message({
								message: `${classType.value == 1 ? "添加成功！" : "编辑成功！"}`,
								type: "success"
							})
							getList()
							// pubParams(getList)
						} else {
							proxy.$message({
								message: res.data.msg,
								type: "error"
							})
						}
					})
					.catch((err) => {
						form_loading.value = false
					})
			}
		})
	}
	const resetClassForm = (formEl) => {
	    if (!formEl) return
	    formEl.resetFields()
	}
	const closeAddClass = () => {
	    dialogClass.value = false
	    resetClassForm(ruleClassRef.value)
	}
	const itemArr = ref("")

	function getList() {
		proxy.$axios
			.get("admin/system/menu/index")
			.then((res) => {
				if (res.data.code == 200) {
					itemArr.value = res.data.data.data
				} else {
					proxy.$message({
						message: res.data.msg,
						type: "error"
					})
				}
			})
			.catch((err) => {})
	}
</script>

<style lang="less" scoped>

</style>